<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>生命周期</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo">
            <h1>当前n的值是：{{n}}</h1>
            <button id="btn" @click="add">点我n+1</button>
            <button @click="goDie">销毁</button>
        </div>

        <script type="text/javascript">
            //阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip = false 
            let vm = new Vue({
                el:'#demo',
                /* template:`
                    <div :a="n">
                        <h1>当前n的值是：{{n}}</h1>
                        <button id="btn" @click="add">点我n+1</button>
                    </div>
                `, */
                data:{
                    n:1
                },
                methods: {
                    add(){
                        console.log('你触发了【点我n+1】上的点击事件')
                        this.n += 1
                    },
                    goDie(){
                        this.$destroy()
                    }
                },
                watch:{
                    n(value){
                        console.log('n变化了',value)
                    }
                },
                // 数据代理、数据劫持  创建前
                beforeCreate() {
                    console.log('---beforeCreate---')
                    // debugger;
                },
                // 数据代理、数据劫持  创建完毕
                created() {
                    console.log('---created---')
                    // debugger;
                },
                // 挂载之前
                beforeMount() {
                    console.log('---beforeMount---')
                    // document.getElementById('btn').innerText = '哈哈'
                    // debugger;
                },
                // 挂载完毕
                mounted() {
                    console.log('---mounted---')
                    // document.getElementById('btn').innerText = '哈哈'
                    // debugger;
                },
                //更新之前
                beforeUpdate() {
                    console.log('---beforeUpdate---')
                },
                // 更新完毕
                updated() {
                    console.log('---updated---',this.n)
                    // debugger;
                },
                // 销毁前
                beforeDestroy() {
                    console.log('---beforeDestroy---',this.n,this.add)
                    this.add()
                    this.n = 999
                },
                // 销毁后
                destroyed() {
                    console.log('---destroyed---')
                }
            })
        </script>
    </body>
</html>